<template>
  <div>
    <el-card class="box-card">
      <div style="display: flex;justify-content: space-between;">
        <div>
          <el-input v-model="userName"
                    placeholder="请输入用户名称"
                    style="width: 200px"></el-input>
          <el-date-picker v-model="timeVal"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
        </el-date-picker>
        <!-- <el-select v-model="isRead" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="已读" value="1"></el-option>
          <el-option label="未读" value="0"></el-option>
        </el-select> -->
        <el-button @click="searchData()"
                    type="primary">查询</el-button>
        </div>
        <div>
          <el-button @click="$router.go(-1)"
                   type="primary">返回</el-button>
           <el-button @click="handleRefresh()"
                   type="danger">刷新</el-button>
        </div>
      </div>
    </el-card>
    <el-card class="box-card"
             style="margin-top: 10px;">
      <div class="des_con">
         <table class="table">
            <tr>
              <td>
               <span>推送标签：</span>{{cpcpSecretary.sendTagName}}
              </td>
              <td>
                <span>描述：</span>{{cpcpSecretary.headlineDes}}
              </td>
            </tr>
           <tr>
              <td>
              <span>推送内容：</span>{{cpcpSecretary.content}}
              </td>
              <td>
               <span>已读：</span><span class="read" @click="fetchTableList(1)">{{cpcpSecretary.readCount}}</span>
              </td>
            </tr>
            <tr>
              <td>
              <span>未读：</span><span class="read" @click="fetchTableList(0)">{{cpcpSecretary.sendCount - cpcpSecretary.readCount}}</span>
              </td>
            </tr>
          </table>
      </div>
      <el-table :data="dataList"
                border
                style="width: 100%;margin-top: 20px;">
        <el-table-column type="index"
                         label="序号"
                         align="center"
                         width="60">
          <template slot-scope="scope">
            <span :title="scope.row.id"> {{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName"
                         label="用户名称"
                         align="center">
          <template slot-scope="scope">
            <span> {{scope.row.userName}}({{scope.row.jobNo}})</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime"
                         label="推送时间"
                         align="center">
        </el-table-column>
        <el-table-column label="是否已读"
                         align="center">
          <template slot-scope="scope">
            <span class="green el-tag el-tag-warn"
                  v-if="scope.row.isRed == 1">已读</span>
            <span class="red el-tag el-tag-red"
                  v-if="scope.row.isRed == 0">未读</span>
          </template>
        </el-table-column>
        <el-table-column prop="redTime"
                         label="已读时间"
                         align="center">
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination :total="total"
                  :pageNum="pageNum"
                  :pageSize="pageSize"
                  @pageChange="pageChange" />
    </el-card>
    <!-- 弹窗, 新增 / 修改 -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  data () {
    return {
      dataList: [],
      pageNum: 1,
      timeVal: "",
      pageSize: 50,
      total: 0,
      userName: '',
      cpcpSecretary: {},
      isRead: null,
      isRead: 0,
      noRead: 0,
      info: {}
    }
  },
  created () {
    // this.isRead = this.$route.query.readCount
    // this.noRead =  Number(this.$route.query.sendCount) - Number(this.$route.query.readCount) 
    this.fetchActiveDetail()
    this.fetchTableList()
  },
  methods: {
    handleRefresh () {
      this.fetchActiveDetail()
      this.fetchTableList()
    },
    // 点击搜索
    searchData () {
      this.fetchTableList()
    },
    // 详情
    fetchActiveDetail () {
      this.$http({
        url: this.$http.adornUrl(`cpcpsecretary/info/${this.$route.query.id}`),
        method: 'get',
        params: this.$http.adornParams({
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.cpcpSecretary = data.cpcpSecretary
        }
      })
    },
    // 获取表格数据
    fetchTableList (isRead) {
      this.$http({
        url: this.$http.adornUrl(`/cpcplog/list`),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageNum,
          limit: this.pageSize,
          sendType: 1,
          linkId: this.$route.query.id,
          searchStr: this.userName,
          readTime: this.timeVal,
          isRead: isRead
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.total = data.page.totalCount;
          this.dataList = data.page.list;
        }
      })
    },
    // 分页
    pageChange (page) {
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.fetchTableList()
    }
  }
};
</script>
<style scoped lang="scss">
@import "../../../assets/scss/span_color";
.green {
  color: green;
}
.red {
  color: red;
}
.des_con span {
  font-size: 18px;
  font-weight: 600;
}
.read{
  cursor: pointer;
  color: yellowgreen;
}
.table{
  width: 100%;
}
.table tr {
  line-height: 30px;
}
.table tr td{
  width: 50%;
}
</style>
